<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Particle Heart</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #ffebee;
            overflow: hidden;
        }

        .heart-container {
            position: relative;
            width: 200px;
            height: 180px;
            filter: drop-shadow(0 0 10px rgba(244, 15, 122, 0.8));
        }

        .particle {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: rgb(110, 91, 5);
            border-radius: 50%;
            box-shadow: 0 0 5px rgba(255, 0, 0, 0.8);
            animation: float 2s infinite ease-in-out;
        }

        @keyframes breathe {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-5px);
            }
        }

            body {
                /* 添加透视效果 */
                perspective: 1000px;
                transform-style: preserve-3d;
            }

            .heart-container {
                /* 添加3D变换 */
                transform-style: preserve-3d;
                animation: breathe 2s infinite, rotate3d 10s infinite linear;
            }

            .particle {
                /* 为每个粒子添加深度 */
                transform: translateZ(calc((var(--depth) - 0.5) * 100px));
            }

            @keyframes rotate3d {
                0% {
                    transform: rotateY(0deg) rotateX(0deg);
                }
                50% {
                    transform: rotateY(180deg) rotateX(180deg);
                }
                100% {
                    transform: rotateY(360deg) rotateX(360deg);
                }
            }
        </style>
    </style>
</head>
<body>
    <div class="heart-container">
        <!-- Particles will be inserted here by JavaScript -->
    </div>

    <script>
        const container = document.querySelector('.heart-container');
        const particles = [];
        const particleCount = 200;

        // Heart shape equation
        function getHeartPosition(angle) {
            const t = angle * Math.PI / 180;
            const x = 16 * Math.pow(Math.sin(t), 3);
            const y = -13 * Math.cos(t) + 5 * Math.cos(2*t) + 2 * Math.cos(3*t) + Math.cos(4*t);
            return {x, y};
        }

        // Create particles
        for (let i = 0; i < particleCount; i++) {
            const angle = (360 / particleCount) * i;
            const {x, y} = getHeartPosition(angle);
            
            const particle = document.createElement('div');
            particle.classList.add('particle');
            particle.style.left = `${50 + x * 5}%`;
            particle.style.top = `${50 + y * 5}%`;
            particle.style.animationDelay = `${Math.random() * 2}s`;
            // 为每个粒子添加随机深度
            particle.style.setProperty('--depth', Math.random());
            
            container.appendChild(particle);
            particles.push(particle);
        }

        // Breathing animation
        container.style.animation = 'breathe 2s infinite';
    </script>
</body>
</html>